<template>
  <div id="addTable">
    <h3>台号</h3>
    <el-input v-model="numInput" disabled> </el-input>
    <h3>限坐人数</h3>
    <el-input
      placeholder="请输入"
      v-model.number="peopleNumInput"
      clearable
    ></el-input>
    <h3>类别</h3>
    <template>
      <el-select v-model="typeValue" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </template>
    <h3>状态</h3>
    <el-input placeholder="请输入" v-model="stateInput" disabled></el-input>
    <el-divider> <i class="el-icon-dessert"></i> </el-divider>
    <el-button @click="openSure">确认添加</el-button>
    <el-button @click="ceshi">测试</el-button>
    <!-- ----------------------确认添加模态框----------------------- -->
  </div>
</template>

<script>
import * as url from "../../http/api";
import http from "../../http/http";
import { mapActions } from "vuex";
export default {
  name: "",
  data() {
    return {
      peopleNumInput: null,
      stateInput: "可坐",
      typeValue: "",

      options: [
        {
          value: "大厅",
          label: "大厅",
        },
        {
          value: "包间",
          label: "包间",
        },
      ],
    };
  },
  computed: {
    numInput() {
      return this.$store.state.wzStore.seats.length + 1;
    },
  },
  methods: {
    ...mapActions(["addSeat"]),
    openSure() {
      if (this.peopleNumInput && this.typeValue) {
        this.$confirm("确认是否添加餐桌?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.$router.push("/CZGL/realTable");
            let obj = {
              number: this.numInput,
              peopleNum: this.peopleNumInput,
              typeId: 0,
              type: this.typeValue,
              state: this.stateInput,
            };
            // console.log(obj);
            this.$store.dispatch("addSeat", obj);
            this.peopleNumInput = null;
            this.typeValue = null;
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消添加",
            });
          });
      } else {
        this.$message({
          message: "请填写完整信息，再进行确认添加",
          type: "warning",
        });
      }
    },
    // ---------------------------------测试
    ceshi() {
      return http({
        method: "post",
        url: "/mgrsite/Admin/insertSeats",
        data: {},
      })
        .then((res) => {
          console.log(res);
          let arr = [...res.data];
          console.log(arr);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.el-input__inner {
  width: 300px;
  // text-align: center;
  margin-bottom: 10px;
}
.el-divider--horizontal {
  margin: 30px 0;
}
.el-divider__text {
  background-color: transparent;
  font-size: 30px;
}
.el-input {
  width: 300px;
}
.el-select {
  width: 300px;
}
</style>
